/**
 * Created by Administrator on 2018/11/15.
 */
new Vue({
    el:'#app',
    data:{
        totalMoney:0,
        totalPrice:0,
        productList:[],//商品数组
        checkAllFlag:false,
        showFlag:false,
        listIndex:''
    },
    //局部过滤器
    filters:{
        formatMoney:function (value) {
            return "￥"+value.toFixed(2)
        }
    },
    mounted:function () {
        this.$nextTick(function () {
            this.cartView();
        })
    },
    methods:{
        cartView:function () {

            this.$http.get("../data/cartData.json",{}).then(res=>{
                this.productList=res.data.result.list;
                this.totalMoney=res.data.result.totalMoney;
            });
            // let _this=this;
            // this.$http.get("../data/cartData.json",{}).then(function (res) {
            //     _this.productList=res.data.result.list;
            //     _this.totalMoney=res.data.result.totalMoney;
            // })
        },


        changeMoney:function (item,num) {
            if(num>0){
                item.productQuantity++;
            }else {
                item.productQuantity--;
                if(item.productQuantity<1){
                    item.productQuantity=1;
                }
            }
            this.calcTotalPrice();
        },

        checkBox:function (item) {
            //当item中没有checked属性时
            if(typeof item.checked == 'undefined'){
                //局部注册一个checked
                this.$set(item,"checked",true)
            }else {
                item.checked = !item.checked
            }

            this.calcTotalPrice();
        },
        
        
        checkAll:function (flag) {
            this.checkAllFlag = flag;
            //es5this作用域
            var _this=this;
                this.productList.forEach(function (item) {
                    if(typeof item.checked == 'undefined'){
                        _this.$set(item,"checked",_this.checkAllFlag)
                    }else {
                        item.checked = _this.checkAllFlag
                    }
                });

            //es6箭头函数
            //     this.productList.forEach(item=>{
            //         if(typeof item.checked == 'undefined'){
            //             this.$set(item,"checked",this.checkAllFlag)
            //         }else {
            //             item.checked = this.checkAllFlag;
            //         }
            //     })

            this.calcTotalPrice();

        },


        calcTotalPrice:function () {
            this.totalPrice=0;
            this.productList.forEach( item =>{
                if(item.checked){
                    this.totalPrice += item.productPrice*item.productQuantity
                }

            })
        },
        delConfirm:function (item) {
            this.showFlag = true;
            this.listIndex=item;
            console.log(this.listIndex)
        },
        delRemove:function () {
            var index=this.productList.indexOf(this.listIndex);
            this.productList.splice(index,1);
            this.showFlag=false;
        }


    }

});
//全局过滤器（带参数）
Vue.filter('money',function (value,type) {
    return "￥"+value.toFixed(2) + type;
});